<template>
  <div>
    <BasicModal v-model:visible="visible" title="核心网启动" @ok="onOk" v-bind="$attrs">
      <template #footer>
        <a-button key="back" @click="handleCancel">取消</a-button>
        <a-button key="submit" type="primary" :loading="loading" @click="onOk">启动</a-button>
      </template>
      <a-form
        ref="formRef"
        layout="vertical"
        name="form_in_modal"
        :model="formModel"
        :rules="formRules"
      >
        <a-form-item label="服务器" has-feedback name="server">
          <a-space>
            <a-select
              v-model:value="formModel.server"
              style="width: 150px"
              placeholder="选择服务器"
            >
              <a-select-option value="172.28.158.98">172.28.158.98 </a-select-option>
              <a-select-option value="172.28.158.99">172.28.158.99</a-select-option>
              <a-select-option value="172.28.158.130">172.28.158.130</a-select-option>
            </a-select>
          </a-space>
        </a-form-item>
        <a-form-item label="场景" has-feedback name="scene">
          <a-space>
            <a-select v-model:value="formModel.scene" style="width: 150px" placeholder="选择场景">
              <a-select-option value="E-NRF">E-NRF</a-select-option>
              <a-select-option value="区块链">区块链</a-select-option>
            </a-select>
          </a-space>
        </a-form-item>
        <a-form-item label="启动方式" has-feedback name="startMode">
          <a-select
            style="width: 120px"
            v-model:value="formModel.startMode"
            placeholder="选择启动方式"
            @change="handleStartModeChange"
          >
            <a-select-option value="full">全量启动</a-select-option>
            <a-select-option value="incremental">增量启动</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
          label="网元"
          has-feedback
          v-if="formModel.startMode != undefined"
          name="selectedElement"
        >
          <a-select
            style="width: 120px"
            v-if="formModel.startMode === 'full'"
            :options="fullOptions"
            v-model:value="formModel.selectedElement"
            placeholder="选择网元"
            change-on-select
          />
          <a-select
            style="width: 110px"
            v-if="formModel.startMode === 'incremental'"
            :options="incrementalOptions"
            v-model:value="formModel.selectedElement"
            placeholder="选择网元"
            change-on-select
          />
        </a-form-item>
      </a-form>
    </BasicModal>
  </div>
</template>

<script setup>
  import { message } from 'ant-design-vue'
  import { ref } from 'vue'
  import { BasicModal } from '/@/components/Modal'
  //const selectedElements = ref([])
  import { startCoreNetworkActivationApi } from '/@/api/console/coreNetWork'
  const validateServer = async (_rule, value) => {
    if (!value) {
      return Promise.reject('请选择服务器！')
    } else {
      return Promise.resolve()
    }
  }

  const validateStartMode = async (_rule, value) => {
    if (!value) {
      return Promise.reject('请选择场景!')
    } else {
      return Promise.resolve()
    }
  }

  const validateSelectedElement = async (_rule, value) => {
    if (!value) {
      return Promise.reject('请选择网元!')
    } else {
      return Promise.resolve()
    }
  }
  const validateScene = async (_rule, value) => {
    if (!value) {
      return Promise.reject('请选择场景!')
    } else {
      return Promise.resolve()
    }
  }
  const formRules = {
    server: [
      { required: true, message: '请选择服务器！', trigger: 'change', validator: validateServer },
    ],
    scene: [
      { required: true, message: '请选择场景! ', ftrigger: 'change', validator: validateScene },
    ],
    startMode: [
      {
        required: true,
        message: '请选择启动方式!',
        trigger: 'change',
        validator: validateStartMode,
      },
    ],
    selectedElement: [
      {
        required: true,
        message: '请选择网元!',
        trigger: 'change',
        validator: validateSelectedElement,
      },
    ],
  }
  const fullOptions = [
    {
      value: 'all',
      label: '全部',
    },
    { value: 'custom1', label: '自定义1' },
    { value: 'custom2', label: '自定义2' },
  ]
  const incrementalOptions = [
    {
      value: 'amf',
      label: 'AMF',
    },
    {
      value: 'smf',
      label: 'SMF',
    },
    {
      value: 'upf',
      label: 'UPF',
    },
    {
      value: 'udm',
      label: 'UDM',
    },
    {
      value: 'nrf',
      label: 'NRF',
    },
    {
      value: 'nssf',
      label: 'NSSF',
    },
    {
      value: 'ausf',
      label: 'AUSF',
    },
    {
      value: 'pcf',
      label: 'PCF',
    },
    {
      value: 'smsf',
      label: 'SMSF',
    },
    {
      value: 'udr',
      label: 'UDR',
    },
    {
      value: 'bsf',
      label: 'BSF',
    },
  ]

  const formModel = ref({
    server: null,
    scene: null,
    startMode: null,
    selectedElement: null,
  })
  //const server = ref('172.28.158.98')
  const formRef = ref()
  const visible = ref(false)
  const loading = ref(false)
  const handleCancel = () => {
    /* formModel.value.server = null
    formModel.value.startMode = null
    formModel.value.selectedElement = null */
    visible.value = false
  }
  const onOk = async () => {
    loading.value = true
    try {
      await formRef.value.validate()
      // 服务端返回的结果中result为空，因此不需要返回值
      await startCoreNetworkActivationApi({
        server: formModel.value.server,
        scene: formModel.value.scene,
        startMode: formModel.value.startMode,
        selectedElement: formModel.value.selectedElement,
      })
      loading.value = false
      handleCancel()
      message.success('启动成功')
    } catch (error) {
      loading.value = false
    }
  }
  const showModal = () => {
    visible.value = true
  }
  const handleStartModeChange = () => {
    formModel.value.selectedElement = null
  }

  defineExpose({
    showModal,
  })
</script>

<style>
  .collection-create-form_last-form-item {
    margin-bottom: 0;
  }
</style>
